// 发起的申请
<template>
  <layoutDividerPage class="initiated">
    <template #search>
      <vxe-form
        title-align="right"
        title-width="80"
        class-name="custom-form"
        :data="formSearch"
        @submit="handleSearch"
        @reset="handleReset"
      >
        <vxe-form-item
          title="申请状态："
          field="auditStatus"
          span="5"
          :item-render="{}"
        >
          <template #default>
            <el-select
              v-model="formSearch.auditStatus"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in auditStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </vxe-form-item>
        <vxe-form-item
          title="申请类型："
          field="businessType"
          span="5"
          :item-render="{}"
        >
          <template #default>
            <el-select
              v-model="formSearch.businessType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in _discStore.getDictType('audit_business_type')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </vxe-form-item>
        <vxe-form-item
          title="提交时间："
          field="createTime"
          span="5"
          :item-render="{}"
        >
          <template #default>
            <el-date-picker
              v-model="formSearch.createTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="开始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </template>
        </vxe-form-item>
        <vxe-form-item span="9" align="right" class-name="custom-form-button">
          <template #default>
            <el-button native-type="submit" type="primary">搜索</el-button>
            <el-button native-type="reset">重置</el-button>
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    <vxe-grid
      ref="xGrid"
      border
      stripe
      keep-source
      auto-resize
      sync-resize
      :loading="listLoading"
      :column-config="{ resizable: true }"
      :export-config="{}"
      :columns="tableColumn"
      align="left"
      show-overflow="tooltip"
      :row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
    >
      <template #form>
        <div class="button-list">
          <el-button :loading="downLoading" @click="handleExport">
            导出搜索结果
          </el-button>
        </div>
      </template>
      <template #options="{ row }">
        <el-button type="primary" link @click="handleDetails(row)">
          详情
        </el-button>
      </template>
      <template #bottom>
        <el-pagination
          background
          :current-page="formSearch.pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="formSearch.pageSize"
          :total="formSearch.total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </template>
    </vxe-grid>
  </layoutDividerPage>
</template>

<script lang="ts" setup>
  import layoutDividerPage from '@/components/layoutDividerPage.vue'
  import { useDownload } from '@/utils/useDownload'
  import {
    formInitiatedSearchProps,
    pagingProps,
    resPageInitiatedProps,
    rowInitiatedProps,
  } from '../interface'
  import {
    getAuditProcessMyAuditPage,
    getAuditProcessExportExcel,
  } from '@/api/project/audit'
  import { useDictStore } from '@/store/modules/dict'

  const _discStore = useDictStore()
  // 审核状态 在这里去掉草稿 属性
  const auditStatus = computed(() => {
    const statusList = _discStore.getDictType('audit_status')
    return statusList.filter((item) => item.value !== '-1')
  })
  const tableColumn = [
    { title: '申请ID', field: 'businessId', minWidth: 50 },
    {
      title: '申请类型',
      field: 'businessType',
      minWidth: 120,
      formatter: ({ cellValue }) => {
        return _discStore.getDictLabelForValue('audit_business_type', cellValue)
      },
    },
    { title: '关联信息', field: 'businessInfo', minWidth: 120 },
    {
      title: '申请状态',
      field: 'auditStatus',
      minWidth: 120,
      formatter: ({ cellValue }) => {
        return _discStore.getDictLabelForValue('audit_status', cellValue)
      },
    },

    {
      title: '提交时间',
      field: 'createTime',
      minWidth: 120,
      formatter: ['formatDate', 'yyyy-MM-dd HH:mm:ss'],
    },
    {
      title: '操作',
      field: 'options',
      minWidth: 80,
      slots: { default: 'options' },
    },
  ]

  // 表格实例
  const xGrid = ref(null)
  // 加载状态
  const listLoading = ref<boolean>(false)
  // 查询表单
  const formSearch = reactive<formInitiatedSearchProps & pagingProps>({
    pageNo: 1,
    pageSize: 10,
    total: 0,
  })

  // 搜索
  const handleSearch = async () => {
    try {
      listLoading.value = true
      const res: resPageInitiatedProps =
        await getAuditProcessMyAuditPage(formSearch)
      if (res && res.code === 0 && res.data) {
        xGrid.value.reloadData(res.data?.list || [])
        formSearch.total = res.data?.total
      } else {
        xGrid.value.reloadData([])
      }
    } catch (e) {
      console.error('获取我发起的审核列表时出错:', e)
      xGrid.value.reloadData([])
    } finally {
      listLoading.value = false
    }
  }
  // 重置
  const handleReset = () => {
    formSearch.pageNo = 1
    formSearch.pageSize = 10
    formSearch.total = 0
    handleSearch()
  }

  // 分页大小变化
  const handleSizeChange = (val: number) => {
    formSearch.pageSize = val
    handleSearch()
  }

  // 当前页变化
  const handleCurrentChange = (val: number) => {
    formSearch.pageNo = val
    handleSearch()
  }

  // 导出搜索结果
  const { downLoading, downloadFile } = useDownload(
    getAuditProcessExportExcel,
    '审核申请-我发起的申请列表.xls'
  )
  const handleExport = async () => {
    const params = {
      ...formSearch,
      exportType: 1,
    }
    await downloadFile(params)
  }
  // 路由实例
  const router = useRouter()

  // 处理详情点击
  const handleDetails = (row: rowInitiatedProps) => {
    router.push({
      name: 'ReviewApplication_Details',
      query: { id: row.businessId, auditId: row.id },
    })
  }

  onMounted(() => {
    handleSearch()
  })
</script>

<style lang="scss" scoped>
  .initiated {
    .button-list {
      display: flex;
      align-items: center;
      justify-content: end;
      margin: 20px 0;
    }
  }
</style>
